<!--
 * @Description: 页签左右滑动组件
-->
<template>
  <div class="_ehl_shuttle">
    <div class="_ehl_shuttle_left _ehl_shuttle_box cpt_round_card">
      <ehl-form
        :ref="ref1"
        :options="leftForm.options"
        :data="leftData"
        :labelWidth="leftForm.labelWidth"
        custom-class="_ehl_shuttle_left_form"
      />
    </div>
    <div class="_ehl_shuttle_arrow_box">
      <i class="_ehl_shuttle_arrow_right el-icon-video-play" @click="arrowRight"></i>
      <i class="_ehl_shuttle_arrow_left el-icon-video-play" @click="arrowLeft"></i>
    </div>
    <div class="_ehl_shuttle_right _ehl_shuttle_box cpt_round_card">
      <ehl-form :ref="ref2" :options="right.options" :data="right.data" />
    </div>
  </div>
</template>
<script>
  import ehlForm from '@/common'
  export default {
    props: {
      //右边的数据
      value: { type: Array, default: () => [] },
      //左边结构
      leftForm: { type: Object, default: () => {} },
      //左边数据
      leftData: { type: Object, default: () => {} },
      //value的key映射
      prop: {
        type: Object,
        default: () => ({ label: 'label', value: 'value', children: 'children' }),
      },
    },
    components: { ehlForm },
    data() {
      return {
        ref1: `shuttle_box1_${Math.random()}`,
        ref2: `shuttle_box2_${Math.random()}`,
        label_p: this.prop['label'],
        value_p: this.prop['value'],
        children_p: this.prop['children'],
        right: {
          options: {
            tree: {
              type: 'tree',
              vertical: true,
              showAll: false,
              inputShow: false,
              checkOnClickNode: true,
              options: [],
              prop: this.prop,
              style: { height: '100%', width: '100%' },
            },
          },
          tree: this.value,
        },
        formConfig2: null,
      }
    },
    created() {
      this.right.options.tree.options = this.value
    },
    mounted() {
      // this.$refs[this.ref1].addParam({ vue: this })
      // this.$refs[this.ref2].addParam({ vue: this })
      this.formConfig2 = this.$refs[this.ref2].getOptions()
    },
    methods: {
      arrowRight() {
        let that = this
        this.leftData.tree.forEach(iii => {
          if (!iii[that.children_p] || iii[that.children_p].length === 0) {
            this.formConfig2.tree.options.push(iii)
          }
        })
        this.formConfig2.tree.options.clearRepeat(this.value_p)
        this.rightData = { tree: this.formConfig2.tree.options }
        this.$emit('input', this.formConfig2.tree.options)
      },
      arrowLeft() {
        let selected = this.$refs[this.ref2].$refs.tree[0].getSelectItem()
        let options = this.formConfig2.tree.options
        let res = options.filter(i => {
          return !selected.find(ii => {
            return i[this.value_p] === ii[this.value_p]
          })
        })
        this.formConfig2.tree.options.clearAll()
        res.forEach(i => {
          this.formConfig2.tree.options.push(i)
        })
        this.rightData = { tree: this.formConfig2.tree.options }
        this.$emit('input', this.formConfig2.tree.options)
      },
    },
  }
</script>
